var num = 100;
var fa = document.getElementById('container');
var ma = document.createElement('div');
var btn = document.querySelectorAll('button')
ma.id = 'mama';
fa.appendChild(ma);
for (let i = 0; i < num; i++) {
    var son = document.createElement('span');
    son.style.height = i * 9 + 'px';
    son.id = i;
    ma.appendChild(son);
}
function daluan() {
    a = new Array();
    b = new Array();
    for (let i = 0; i < num; i++) {
        a.push(i);
    }
    for (let i = 0; i < num; i++) {
        var index = parseInt(Math.random() * a.length);
        var son = document.createElement('span');
        b.push(a[index]);
        son.style.height = a.splice(index, 1) * 9 + 'px';
        son.id = i;
        var re = document.getElementById(i);
        ma.removeChild(re)
        ma.appendChild(son);
    }
}
function maopao() {
    // var start = new Date().getTime();
    var i = 0;
    var j = 0;
    var mp = setInterval(function () {
        if (i < num) {
            if (j < num - i - 1) {
                var n = document.getElementById(j).style.height;
                var m = document.getElementById(j + 1).style.height;
                if (parseInt(n) > parseInt(m)) {
                    document.getElementById(j).style.height = [m, document.getElementById(j + 1).style.height = n][0];
                }
                j++;
            } else {
                i++;
                j = 0;
            }
        } else {
            alert('冒泡排序完成');
            return clearInterval(mp);
        }
    }, 1)
    // for (let i = 0; i < num; i++) {
    //     for (let j = 0; j < num - i - 1; j++) {
    //         var n = document.getElementById(j).style.height;
    //         var m = document.getElementById(j + 1).style.height;
    //         if (parseInt(n) > parseInt(m)) {
    //             document.getElementById(j).style.height = [m, document.getElementById(j + 1).style.height = n][0];
    //         }
    //     }
    // }
    // var end = new Date().getTime();
    // console.log('冒泡排序完成，耗时' + (end - start) + 'ms');
}
function kuaisu() {
    var start = new Date().getTime();
    var low = 0;
    var high = num - 1;
    quickSort(low, high);
    var end = new Date().getTime();
    console.log('快速排序完成，耗时' + (end - start) + 'ms');
}

function quickSort(low, high) {
    if (low < high) {
        var i = low;
        var x = parseInt(document.getElementById(low).style.height);
        for (let j = low + 1; j <= high; j++) {
            if (parseInt(document.getElementById(j).style.height) <= x) {
                i++;
                if (i != j) {
                    document.getElementById(i).style.height = [document.getElementById(j).style.height, document.getElementById(j).style.height = document.getElementById(i).style.height][0];
                }
            }
        }
        document.getElementById(i).style.height = [document.getElementById(low).style.height, document.getElementById(low).style.height = document.getElementById(i).style.height][0];
        quickSort(low, i - 1);
        quickSort(i + 1, high);
    }
}
// function quickSort(arr, left, right) {
//     if (left < right) {
//         var min = left, max = right, baseNumber = arr[left];
//         while (min < max) {
//             while (min < max && arr[max] >= baseNumber)
//                 max--;
//             if (min < max)
//                 arr[min++] = arr[max];
//             while (min < max && arr[min] < baseNumber)
//                 min++;
//             if (min < max)
//                 arr[max--] = arr[min];
//             arr[min] = baseNumber;
//             reset(arr);
//             quickSort(arr, left, min - 1);
//             quickSort(arr, min + 1, right);
//         }
//     }
// }
// function reset(arr) {
//     var line = document.querySelectorAll('#mama span');
//     for (let i = 0; i < line.length; i++) {
//         line[i].style.height = arr[i] * 9 + 'px';
//     }
// }
btn[0].addEventListener('click', daluan);
btn[1].addEventListener('click', maopao);
btn[2].addEventListener('click', kuaisu);